<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />

<div class="container-fluid">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div>
      <div class="content-block">
        <keira-query-output
          [docUrl]="docUrl"
          [isNew]="editorService.isNew"
          [diffQuery]="editorService.diffQuery"
          [fullQuery]="editorService.fullQuery"
          [error]="editorService.error"
          [entityTable]="editorService.entityTable"
          [editorService]="editorService"
          (executeQuery)="save($event)"
        />
      </div>
      <div class="content-block">
        <form [formGroup]="editorService.form" class="form-group edit-form">
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="guid">guid</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.GUID' | translate"></i>
              <input [formControlName]="'guid'" id="guid" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="path_id">path_id</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.PATH_ID' | translate"></i>
              <input [formControlName]="'path_id'" id="path_id" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="mount">mount</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.MOUNT' | translate"></i>
              <input [formControlName]="'mount'" id="mount" type="number" class="form-control form-control-sm" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="bytes1">bytes1</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.bytes1"
                id="bytes1"
                [optionList]="CREATURE_ADDON_BYTES_1"
              />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="bytes2">bytes2</label>
              <keira-generic-option-selector
                [control]="editorService.form.controls.bytes2"
                id="bytes2"
                [optionList]="CREATURE_ADDON_BYTES_2"
              />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="emote">emote</label>
              <keira-generic-option-selector [control]="editorService.form.controls.emote" id="emote" [optionList]="EMOTE" />
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="visibilityDistanceType">visibilityDistanceType</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.VISIBILITY_DISTANCE_TYPE' | translate"></i>
              <input
                [formControlName]="'visibilityDistanceType'"
                id="visibilityDistanceType"
                type="number"
                class="form-control form-control-sm"
              />
            </div>
            <div class="form-group col-12 col-sm-12 col-md-8 col-lg-6 col-xl-4">
              <label class="control-label" for="auras">auras</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.SPAWN.AURAS' | translate"></i>
              <input [formControlName]="'auras'" id="auras" class="form-control form-control-sm" />
            </div>
            <div class="col-12 form-error" [hidden]="editorService.isFormIdUnique()">
              <i class="fas fa-exclamation-triangle"></i>
              <span [innerHTML]="'UNIQUE' | translate: { ENTITY_SECOND_ID_FIELD: editorService.entitySecondIdField }"></span>
            </div>
          </div>
        </form>
        <div class="row">
          <div class="col-12">
            <button
              id="delete-selected-row-btn"
              class="btn btn-danger btn-sm me-2"
              (click)="editorService.deleteSelectedRow()"
              [disabled]="editorService.selectedRowId === null || editorService.selectedRowId === undefined"
              [translate]="'DELETE_SELECTED_ROW'"
            ></button>
            <button
              id="add-new-row-btn"
              class="btn btn-success btn-sm"
              (click)="editorService.addNewRow()"
              [translate]="'ADD_NEW_ROW'"
              disabled
            ></button>
            <ngx-datatable
              id="editor-table"
              class="bootstrap table table-striped text-center datatable-select"
              [rows]="editorService.newRows"
              [headerHeight]="DTCFG.headerHeight"
              [footerHeight]="DTCFG.footerHeight"
              [columnMode]="DTCFG.columnMode"
              [rowHeight]="DTCFG.rowHeight"
              [selectionType]="DTCFG.selectionType"
              (select)="editorService.onRowSelection($event)"
              (keydown.delete)="editorService.deleteSelectedRow()"
            >
              <ngx-datatable-column [minWidth]="30" [maxWidth]="30" [sortable]="false">
                <ng-template let-row="row" ngx-datatable-cell-template>
                  <i [hidden]="!editorService.isRowSelected(row)" class="fas fa-chevron-right"></i>
                </ng-template>
              </ngx-datatable-column>
              <ngx-datatable-column name="guid" prop="guid" [minWidth]="80" />
              <ngx-datatable-column name="path_id" prop="path_id" />
              <ngx-datatable-column name="mount" prop="mount" />
              <ngx-datatable-column name="bytes1" prop="bytes1" />
              <ngx-datatable-column name="bytes2" prop="bytes2" />
              <ngx-datatable-column name="emote" prop="emote" />
              <ngx-datatable-column name="auras" prop="auras" />
            </ngx-datatable>
          </div>
        </div>
      </div>
    </div>
  }
</div>
